<script setup lang='ts'>
import { useUpdateSysUser } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const { path } = useRoute()

const isSetting = path.includes('personnel-setting')

const { isPending, mutate } = useUpdateSysUser()

const id = defineModel<any>('id')

const treeData = defineModel<any>('treeData')

const visible = defineModel<boolean>('visible', { required: true })

const detailValue = defineModel<any>('detailValue')

const showType = defineModel<'edit' | 'view'>('showType')

const isEdit = showType.value === 'edit'

const dialog = computed(() => isEdit ? '编辑详情' : '查看详情')

const formRef = ref()

const state = ref<any>({

},
)

const columns: any[] = [
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting,
        label: '来源',
        prop: 'whcjsourceName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: !isSetting,
        label: '人员编码',
        prop: 'personbm',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        hideInForm: !isSetting,
        label: '系统人员编码',
        prop: 'whcjpersonid',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '编号',
        prop: 'personbm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '姓名',
        prop: 'personxm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '性别',
        options: [
            {
                label: '男',
                value: '男',
            },
            {
                label: '女',
                value: '女',
            },
        ],
        prop: 'personxb',
        valueType: isEdit ? 'select' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '办公电话',
        prop: 'personbgdh',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '手机号码',
        prop: 'personsjhm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: {
            type: 'date',
            valueFormat: 'YYYY-MM-DD',
        },
        label: '出生日期',
        prop: 'personcsrq',
        valueType: isEdit ? 'date-picker' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '年龄',
        prop: 'personnl',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '证件类型代码',
        prop: 'personzjlxdm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '证件类型',
        options: [
            {
                label: '身份证',
                value: '身份证',
            },
        ],
        prop: 'personzjlx',
        valueType: isEdit ? 'select' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '证件号码',
        prop: 'personzjhm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '职务层级',
        prop: 'personzj',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '所属领导',
        prop: 'personssld',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: {
            filterable: true,
            props: {
                checkStrictly: true,
                children: 'childs',
                emitPath: false,
                label: 'orgName',
                value: 'orgCode',
            },
            showAllLevels: false,
        },
        label: '所属组织',
        options: treeData,
        prop: isEdit ? 'personsszz' : 'personsszzname',
        valueType: isEdit ? 'cascader' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '人员类型代码',
        prop: 'personrylxdm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '人员类型',
        prop: 'personrylx',
        valueType: isEdit ? 'input' : 'text',
    },

    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '当前职务',
        prop: 'persongwmc',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '转正日期',
        prop: 'personzzrq',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { min: 0, precision: 0, step: 1 },
        label: '显示顺序',
        prop: 'personxssx',
        valueType: isEdit ? 'input-number' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '学位',
        prop: 'personxw',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '学历',
        prop: 'personxl',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '职称等级',
        prop: 'personzc',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '民族',
        prop: 'personmz',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '岗位类别代码',
        prop: 'persongwlbdm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '岗位类别',
        prop: 'persongwlb',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '人员性质代码',
        prop: 'personryxzdm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '人员性质',
        prop: 'personryxz',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '人员状态代码',
        prop: 'personryztdm',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '人员状态',
        options: [
            {
                label: '启用',
                value: '启用',
            },
            {
                label: '停用',
                value: '停用',
            },
        ],
        prop: 'personryzt',
        valueType: isEdit ? 'select' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '修改人',
        prop: 'personxgr',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: isSetting,
        label: '岗位名称',
        prop: 'persongwmc',
        valueType: isEdit ? 'input' : 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '修改时间',
        prop: 'personxgsj',
        valueType: 'text',
    },
]

const rules = {
    personcsrq: [
        {
            message: '请选择出生日期',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personryzt: [
        {
            message: '请选择人员状态',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personsjhm: [
        {
            message: '请输入手机号码',
            required: true,
            trigger: ['blur', 'change'],
        },
        { message: '手机号码格式不正确', pattern: /^1[3-9]\d{9}$/, trigger: 'blur' },
    ],
    personsszz: [
        {
            message: '请选择所属组织',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personxb: [{
        message: '请选择性别',
        required: true,
        trigger: ['blur', 'change'],
    }],
    personxm: [
        {
            message: '请输入姓名',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personxssx: [
        {
            message: '请输入显示顺序',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personzjhm: [
        {
            message: '请输入证件号码',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personzjlx: [
        {
            message: '请选择证件类型',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    formRef.value.formInstance.resetFields()
    state.value = {}
}

async function confirm() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            ...state.value,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

watchEffect(() => {
    if (id.value && detailValue.value) {
        state.value = cloneDeep(detailValue.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  class="max-h-600 overflow-x-hidden overflow-y-auto"
                  :row-props="{ gutter: 20 }"
                  :rules="isEdit ? rules : {}"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn v-if="showType === 'edit'"
                           type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
